<script setup>
import { getPcdListApi } from '@/api/pcd';
import { addSupplier, updateSupplier } from '@/api/supplier';
import { ElMessage } from 'element-plus';
import { getCurrentInstance, onMounted, ref } from 'vue';
const emits = defineEmits(['query'])
const value = ref([])
//获取当前Vue实例
const instance = getCurrentInstance()
const ruleFormRef = ref(null)
const dialogFormVisible = ref(false)
const title = ref('')
const pcdList = ref([])
const supplierForm = ref({
  id: '',
  supplierName: '',
  linkName: '',
  linkPhone: '',
  address: '',
  pcdId: '',
})

const reset = () => {
  supplierForm.value = {
    id: '',
    supplierName: '',
    linkName: '',
    linkPhone: '',
    address: '',
    pcdId: '',
  }
  ruleFormRef.value.resetFields()
  dialogFormVisible.value = false
}

const save = async () => {
  if (!ruleFormRef) return
  await ruleFormRef.value.validate(async (valid, fields) => {
    if (valid) {
      let res = null
      if (supplierForm.value.id) {
        res = await updateSupplier(supplierForm.value)
      } else {
        res = await addSupplier(supplierForm.value)
      }
      if (res.code == 200) {
        ElMessage.success('操作成功')
        dialogFormVisible.value = false
        emits('query')
      } else {
        ElMessage.error('操作失败')
      }
    } else {
      console.log('error submit!', fields)
    }
  })
}

const handleChange = (val) => {
  // 将级联选择器的值赋给 supplierForm.pcdId
  // val 是一个数组，通常取最后一个值作为选中的ID
  supplierForm.value.pcdId = val[val.length - 1]
}

const rules = ref({
  supplierName: [
    { required: true, message: '名字不能为空', trigger: 'blur' }
  ],
})
const getPcdList = async () => {
  const result = await getPcdListApi()
  pcdList.value = result.data
  // console.log(pcdList.value)
}

defineExpose({
  dialogFormVisible,
  title,
  supplierForm,
  reset
})

onMounted(() => {
  getPcdList()
})
</script>

<template>
  <el-dialog v-model="dialogFormVisible" :title="title" style="width: 520px;">
    <el-form :model="supplierForm" :rules="rules" ref="ruleFormRef" label-width="auto">
      <el-form-item label="供应商名字" placeholder="请输入供应商名字" prop="supplierName" style="width: 350px;">
        <el-input v-model="supplierForm.supplierName" />
      </el-form-item>
      <el-form-item label="联系人名字" placeholder="请输入联系人名字" prop="linkName" style="width: 350px;">
        <el-input v-model="supplierForm.linkName" />
      </el-form-item>
      <el-form-item label="联系人手机号" placeholder="请输入联系人手机号" prop="linkPhone" style="width: 350px;">
        <el-input v-model="supplierForm.linkPhone" />
      </el-form-item>
      <el-form-item label="所属城市" placeholder="请选择" prop="pcdId">
        <el-cascader v-model="value" :options="pcdList" @change="handleChange" style="width: 255px;" />
      </el-form-item>
      <el-form-item label="详细地址" placeholder="请输入详细地址" prop="address" style="width: 350px;">
        <el-input v-model="supplierForm.address" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="reset">取消</el-button>
        <el-button type="primary" @click="save"> 提交 </el-button>
      </span>
    </template>
  </el-dialog>
</template>